<div fxLayout="row" fxLayout.xs="column">
  <div fxFlex="15" fxFlex.sm="30" fxFlex.md="20">
    <!-- Project list -->
    <mat-accordion>
        <mat-expansion-panel class="project-list" expanded="true" appHelpElement="Project" subSection="Project List">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <h3>Project List</h3>
            </mat-panel-title>
          </mat-expansion-panel-header>

          <app-loading-spinner *ngIf="loading"></app-loading-spinner>
          <mat-nav-list>
            <a mat-list-item *ngFor="let project of shownProjects" routerLink='/project/{{project.id}}' [routerLinkActive]="['is-active']">{{project.displayName}}</a>
          </mat-nav-list>
          <div *ngIf="projects?.length > shownProjectNumber">
            <div class="button margin10" (click)="toggleShowAll(true)" *ngIf="projects?.length !== shownProjects?.length">
              <button mat-button>Show more...</button>
            </div>
            <div class="button margin10" (click)="toggleShowAll(false)" *ngIf="projects?.length === shownProjects?.length">
              <button mat-button>Show less</button>
            </div>
          </div>
        </mat-expansion-panel>
        <mat-expansion-panel expanded="false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <h3>Archived Project</h3>
            </mat-panel-title>
          </mat-expansion-panel-header>
          <app-loading-spinner *ngIf="loading"></app-loading-spinner>
          <mat-nav-list>
            <a mat-list-item *ngFor="let project of archivedProjects" routerLink="/project/archive/{{project.id}}" [routerLinkActive]="['is-active']">{{project.name}}</a>
          </mat-nav-list>
        </mat-expansion-panel>
        <mat-expansion-panel expanded="false" *ngIf="deletingProjects?.length > 0">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <h3>Deleting Project</h3>
            </mat-panel-title>
          </mat-expansion-panel-header>
          <mat-nav-list>
            <a mat-list-item *ngFor="let project of deletingProjects" routerLink="/project/deleting/{{project.id}}" [routerLinkActive]="['is-active']">{{project.name}}</a>
          </mat-nav-list>
        </mat-expansion-panel>
    </mat-accordion>
  </div>
  <div fxFlex="85" fxFlex.sm="70" fxFlex.md="80" class="project-detail">
      <!-- Content -->
      <router-outlet></router-outlet>
  </div>
</div>
